<template>
  <div class="moredoctor">
    <Navtab :title="title" />
    <div class="doctorInfo">
      <van-card
        v-for="item in doctorsList"
        @click-thumb="goDoctorsDetail(item.Did)"
        :key="item.id"
        thumb="https://kang-1305144775.cos.ap-nanjing.myqcloud.com/heade.jpg"
      >
        <template #desc>
          <div class="doctorinfo">
            <div class="selectDot">
              <van-button
                type="primary"
                size="small"
              >选择医生</van-button>
            </div>
            <div class="info">
              {{item.Dname}}&nbsp;{{item.Dpro}}
            </div>
            <div class="info">
              {{item.hospital}}&nbsp;{{item.Doffice}}
            </div>
            <div class="info">
              擅长:{{item.Dspecialise}}
            </div>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>
<script>
import Navtab from '../../../components/Navtab'
export default {
  components: {
    Navtab
  },
  data: () => ({
    title: '',
    doctorsList: []
  }),
  methods: {
    async getDots() {
      const res = await this.$http.getDots()
      this.doctorsList = res.data
    },
    goDoctorsDetail(id) {
      this.$router.push('/home/doctorsInfo/' + id)
    }
  },
  created() {
    this.title = this.$route.meta.title
    this.getDots()
  }
}
</script>
<style lang="scss" scoped>
.moredoctor {
  .doctorInfo {
    width: 100%;
    height: 100%;
  }
  .van-card__content {
    .info {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      margin-top: 4px;
      color: #999;
    }
  }
  .doctorinfo {
    position: relative;
    .selectDot {
      position: absolute;
      right: 1px;
    }
  }
}
</style>
